<script setup lang="ts">
import { ref } from 'vue'
import ColorPicker from './ColorPicker.vue'

const color1 = ref('#ff0000')
const color2 = ref('#00ff00')
const color3 = ref('#0000ff')

const handleColorChange = (color: string) => {
  console.log('颜色已更改:', color)
}
</script>

<template>
  <view class="color-picker-demo">
    <view class="demo-item">
      <text class="demo-title">基础用法</text>
      <ColorPicker v-model="color1" @change="handleColorChange" />
      <text class="demo-value">选中的颜色: {{ color1 }}</text>
    </view>
    <view class="demo-item">
      <text class="demo-title">带预设色</text>
      <ColorPicker v-model="color2" :preset-colors="['#ff0000','#00ff00','#0000ff','#ffff00']" />
      <text class="demo-value">选中的颜色: {{ color2 }}</text>
    </view>
    <view class="demo-item">
      <text class="demo-title">禁用状态</text>
      <ColorPicker v-model="color3" :disabled="true" />
      <text class="demo-value">选中的颜色: {{ color3 }}</text>
    </view>
  </view>
</template>

<style scoped>
.color-picker-demo {
  padding: 32rpx;
}
.demo-item {
  margin-bottom: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  padding: 24rpx;
}
.demo-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
}
.demo-value {
  display: block;
  margin-top: 16rpx;
  color: #666;
  font-size: 28rpx;
}
</style>
